﻿@model GameSchoolApplication.Models.ViewModels.CourseViewModel
<input type="hidden" id="navString" value="course" />
<input type="hidden" id="ID" value="@Model.course.cID" />

<div id="courseHeader">
    <input type="hidden" id="selectedCourseID" value=@Model.course.cID />
    <div id="iconDisplay" class="courseIcon">
        <label class="courseTitle">@Model.course.name</label>
        <progress id="courseHead" class="progBar" value="0" max="0">asd</progress>
    </div>
   <div class="coursedesc">@Model.course.courseDesc</div> 
</div><!--header end-->

<div id="courseBody">
    <div id="levelIconDisplay" >

    </div>
</div><!--body end-->

<div id="courseFooter">
    
</div>
<p>
@Html.ActionLink("Kennara aðgerðir", "TeacherView", "Course", new { courseID = Model.course.cID }, null)<br />
@Html.ActionLink("Admin aðgerðir", "AdminView", "Course", new { courseID = Model.course.cID }, null)
</p>

<script id="levelIconTemplate" type="text/html"  >
    <a class="courseIcon" href="../Level/LevelIndex?levelID=${levelID}" >
            <input type="hidden" value="${levelID}" />
			<label class="courseTitle">${name}</label>
            <input type="text" value="${hasAccess}" class="access" />
			<progress class="progBar" value="${progress}" max="${assignmentCount}" />
    </a><!--levelIcon end-->
</script>
<script type="text/javascript">
    $(document).ready(function () {
        var courseID = $("input#selectedCourseID").val();
        var param = { courseID: courseID }
        $.getJSON("/Level/getCourseLevels", param, function (data) {
            $.each(data, function () {
                var inject = '<a class=\"levelIcon\" href=';
                if (this.hasAccess == false) {
                    inject += '\"#\" ><input type=\"hidden\" value=\"' + this.levelID + '\" /><label class=\"courseTitle\">' + this.name + '</label><div class=\"imgLock\"><img src=\"../../Content/themes/base/images/Lock-icon.png\" /></div>';
                }
                else {
                    $('#courseHead').attr('value', ($('#courseHead').attr('value') + 1));
                    inject += '\"../Level/LevelIndex?levelID=' + this.levelID + '\" ><input type=\"hidden\" value=\"' + this.levelID + '\" /><label class=\"courseTitle\">' + this.name + '</label><div class=\"imgLock\"><img src=\"../../Content/themes/base/images/Unlock-icon.png\" /></div>';
                }
                inject += '<progress class=\"progBar\" value=\"' + this.progress + '\" max=\"' + this.assignmentCount + '\" /></a>';
                $(inject).appendTo("#levelIconDisplay");
                
                $('#courseHead').attr('max', $('#courseHead').attr('max')+1);
            });
            $('#courseHead').attr('value', ($('#courseHead').attr('value') - 1));
            $('#courseHead').attr('max', $('#courseHead').attr('max') - 1)
        });


        

    });
</script>


